<template>
  <a-modal
    width="660px"
    v-model="showModal" title="请确认对服务商订单进行取消"
    :confirm-loading="loading"
    @ok="submit"
  >
    <a-spin :spinning="loading">
<!--      <section class="mb-16">服务商取消订单会严重影响用户体验，且可能被平台方处罚，请确保已和客户协商确认并通知对应平台，以免造成损失。</section>-->
      <a-table
        bordered
        :show-header="false"
        :columns="columns"
        :data-source="data"
        :pagination="false"
      >
        <section slot="label" slot-scope="label" class="font-bold">{{ label }}</section>
        <section slot="value" slot-scope="value">{{ value }}</section>
      </a-table>
      <a-form class="mt-24" :form="form">
        <a-form-item>
          <a-textarea
            :max-length="300"
            placeholder="请输入取消原因"
            :rows="3"
            v-decorator="[
              'cancelReason',
              {rules: [{required: true, whitespace: true, message: '请输入取消原因'}]}
            ]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import {getVendorDetails} from '@/api/vendor'
import {getStoreDetail} from '@/api/store'
import { orderCancel } from '@/api/order/order-manage'
export default {
  name: 'CancelOrder',
  data() {
    return {
      showModal: false,
      loading: false,
      currData: {
        vendorName: '',
        pickupStoreName: '',
      },
      vendorData: {
        contactName: '',
        contactPhone: ''
      },
      storeData: {
        contactName: '',
        telephone: ''
      },
      form: this.$form.createForm(this),
      columns: [
        {dataIndex: 'label', width: '40%', align: 'center', scopedSlots: {customRender: 'label'}},
        {dataIndex: 'value', width: '60%', align: 'center', scopedSlots: {customRender: 'value'}},
      ]
    }
  },
  computed: {
    data() {
      return [
        {label: '服务商-门店', value: `${this.currData.vendorName}-${this.currData.pickupStoreName}`},
        {label: '联系人', value: `（服务商）${this.vendorData.contactName}；（门店）${this.storeData.contactName}`},
        {label: '联系电话', value: `（服务商）${this.vendorData.contactPhone}；（门店）${this.storeData.telephone}`},
      ]
    }
  },
  watch: {
    showModal(val) {
      if (!val) {
        this.form.resetFields()
      }
    }
  },
  methods: {
    open(data) {
      this.showModal = true
      this.loading = true
      this.currData = data
      Promise.all([
        getVendorDetails({id: data.vendorId}).then(data => {
          this.vendorData = data
        }),
        getStoreDetail({storeId: data.pickupStoreId}).then(data => {
          this.storeData = data
        }),
      ]).finally(() => this.loading = false)

    },
    submit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.loading) return
          this.loading = true
          orderCancel({id: this.currData.id, cancelReason: values.cancelReason.trim()}).then(() => {
            this.$message.success('取消订单成功！')
            this.showModal = false
            this.$emit('success')
            this.getData()
          }).finally(() => this.loading = false)
        }
      })
    }
  }
}
</script>
